<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>海报</title>
    <meta content="width=device-width,viewport-fit=cover,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
          name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 320px;
            margin: 0 auto;
        }

        .poster {
            width: 320px;
            padding: 10px;
            background: #fff;
            border-radius: 8px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .poster-img {
            width: 100%;
        }

        .poster-img img {
            display: block;
            width: 100%;
            object-fit: cover;
            border-radius: 38px;
        }

        .poster-info {
            padding-bottom: 16px;
        }

        .info {
            margin-top: -20px;
            display: flex;
            align-items: flex-end;
        }

        .header-img {
            width: 42px;
            height: 42px;
            border-radius: 42px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-img img {
            width: 38px;
            height: 38px;
            border-radius: 38px;
        }

        .name {
            font-size: 12px;
            color: #000;
            margin-left: 5px;
        }

        .desc {
            display: block;
            margin-top: 8px;
            font-size: 14px;
            color: #333333;
        }

        .poster-down {
            padding-bottom: 16px;
            text-align: center;
        }

        .poster-down p img {
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
<div id="canvas">
    <div class="poster">
        <div class="poster-img">
            <img src="https://studentliu.s3.us-west-1.amazonaws.com/2022/03/21/3b55266ecd2e423791ffbdb7ade328f0.png"/>
        </div>
        <div class="poster-info">
            <div class="info">
                <div class="header-img">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                </div>
                <span class="name">小明</span>
            </div>
            <div class="desc" th:utext="${desc}"></div>
        </div>
        <div class="poster-down">
            <p><img src="https://img.yzcdn.cn/vant/cat.jpeg"/></p>
            <p class="desc">扫一扫，下载留同学APP</p>
        </div>
    </div>
</div>
</body>
</html>
